import { useFilesStore } from '@/store'
import { FileAddOutlined, EditOutlined, DeleteOutlined } from '@ant-design/icons'
import { useShallow } from 'zustand/react/shallow'

type FileMenuOptions = {
  file?: { path: string }
  showItems?: Array<'newFile' | 'rename' | 'delete'>
}

export const FileMenuItems = (options?: FileMenuOptions) => {
  const { startRename, startCreateFile, deleteFile } = useFilesStore(
    useShallow((state) => ({
      startRename: state.startRename,
      startCreateFile: state.startCreateFile,
      deleteFile: state.deleteFile
    }))
  )

  const file = options?.file
  const showItems = options?.showItems

  const arr = [
    {
      key: 'newFile',
      label: '新建文件',
      icon: <FileAddOutlined />,
      onClick: () => startCreateFile()
    },
    {
      key: 'rename',
      label: '重命名',
      icon: <EditOutlined />,
      onClick: () => file?.path && startRename(file.path)
    },
    {
      key: 'delete',
      label: '删除',
      icon: <DeleteOutlined style={{ color: 'var(--error)' }} />,
      onClick: () => file?.path && deleteFile(file.path)
    }
  ]

  return showItems ? arr.filter((item) => showItems.includes(item.key as any)) : arr
}
